<template>
  <page>
    <view class="hint" v-show="balance > 50000">
      <text>充值金额不能超过5万</text>
    </view>
    <view class="recharge-info">
      <view class="title">
        <text>充值金额</text>
      </view>
      <view class="input-recharge">
        <view class="tit">
          <text>￥</text>
        </view>
        <view class="price">
          <input type="number" placeholder="" v-model="balance">
        </view>
      </view>
    </view>
    <view class="footer-btn">
      <view class="btn" @click="onConfirm">
        <text>确定充值</text>
      </view>
    </view>
  </page>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import {rechargeBalance} from "../../../api/wallet";

const {proxy} = getCurrentInstance();
const balance = ref('');

/**
 * 确认充值点击
 */
function onConfirm(){
  if(!balance.value){
    proxy.$way.toast('充值金额不能超过5万');
    return;
  }
  uni.showModal({
    title: '提示',
    content: '是否确认充值？',
    success: function (res) {
      if (!res.confirm) {
        return;
      }
      rechargeBalance({
        balance: balance.value,
      }).then(res =>{
        balance.value = '';
        uni.showModal({
          title: '提示',
          showCancel: false,
          content: '模拟充值成功，虚拟充值仅提供娱乐，请友好使用，不保证此功能后续会存在',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      })
    }
  });
}
</script>

<style lang="scss">
@import "recharge.scss";
</style>
